<template>
  <up-radio
    :label="label"
    :name="name"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :size="size"
    :iconSize="iconSize"
    :labelColor="labelColor"
    :labelSize="labelSize"
    :="$attrs"
    class="nw-radio"
  >
    <template #icon>
      <slot name="icon"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
      <view
        class="label-radio"
        :style="{
          'z-index': modelValue === name ? 10 : -1
        }"
        @click="handleRadioClick"
      ></view>
    </template>
  </up-radio>
</template>

<script setup>
defineOptions({
  name: 'Radio',
  inheritAttrs: false
})

const props = defineProps({
  label: {
    type: [String, Number],
    default: ''
  },
  name: {
    type: [String, Number],
    default: ''
  },
  activeColor: {
    type: String,
    default: '#27be87'
  },
  inactiveColor: {
    type: String,
    default: '#bbbbbb'
  },
  size: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(24)
  },
  labelColor: {
    type: String,
    default: () => '#333'
  },
  labelSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(22)
  },
  iconSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(16)
  }
})

const modelValue = defineModel({
  type: [String, Number],
  default: ''
})

const handleRadioClick = _ => {
  console.log('handleRadioClick')
  setTimeout(() => {
    modelValue.value = ''
  })
}
</script>

<style lang="scss" scoped>
.nw-radio.u-radio {
  position: relative;
  margin: 0;
  :deep(.u-radio__icon-wrap) {
    flex-shrink: 0;
    margin: 0;
    .u-icon__icon {
      //
    }
  }
  :deep(.u-radio__label-wrap) {
    overflow: hidden;
  }
  .label-radio {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
